<template>
     <el-row>
        <el-col :span="2" v-for="(tab,index) in tabs">
             <el-link :underline="false" type="primary" @click="projectSearch(index)">{{tab}}</el-link>
        </el-col>
       
        <el-col :span="4">
            <el-input v-model="input" placeholder="项目搜索" clearable />
        </el-col>
        <el-col :span="2">
         
            <el-button type="primary" @click="search">  
                 <el-icon><Search /></el-icon>Search
            </el-button>
        </el-col>
        <el-col :span="6"></el-col>
    </el-row>
    <el-divider />
<!-- 项目信息展示 -->
    <el-row :gutter="20">
        <el-col :span="8" v-for="i in projectData"  >
            <el-card class="box-card" shadow="hover" @click="toProjectDe(i)">
                <template #header>
                <div>
                    <span>{{ i.projectName }}</span>                  
                </div>
                </template>
                <div >
                    开始时间
                    <el-date-picker
                        v-model="i.startTime"
                        type="date"
                        readonly="true"
                       
                    />
                    
                </div>
                <div >
                    结束时间
                    <el-date-picker
                        v-model="i.endTime"
                        type="date"
                        readonly="true"
                        
                    />
                </div>  
                <div>
                    审核状态：<el-progress :percentage="50" :format="format" :indeterminate="true" v-if="i.approvalStatus==0"/>
                    <el-progress
                        :percentage="100"
                        status="success"
                        :indeterminate="true"
                        :duration="5"
                        v-if="i.approvalStatus==2"
                     />
                     <el-progress :percentage="50" status="exception" :indeterminate="true" v-if="i.approvalStatus==1"/>

                </div>  
                       
            </el-card>
        </el-col>
        
    </el-row>
   
</template>
<script>
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus'
export default{
    data(){
        return{
            tabs:['全部','我管理的项目','我参与的项目','我监控的项目','我审核的项目','我创建的项目'],
            input:'',//搜搜
            status:"exception",//项目进度
            projectData:[]
        }
       
    },
    methods:{
        //给定条件搜索项目展示
        projectSearch(index){
            this.axios({
                method:'post',
                url:'http://localhost:8080/project/projectApprover',
                params:{
                    index:index,
                    projectApprover:'4'//审批人id 登录者自己 模拟4号
                }
            }).then((response)=>{
                console.log(response);
                var status=response.status;
                var data=response.data.data;
                var code=response.data.code;
                var message=response.data.message;
                if(status===200){
                    if(code==200){
                        this.projectData=data;
                    }else{
                        ElNotification.success({
                           
                            message:  message,
                            offset: 100,
                        })
                    }
                }
            })
        },
        //模糊搜索项目
        search(){

        },
        //去项目项目详情页面
        toProjectDe(i){
            var flag=i.approvalStatus;
            if(flag==1){
                ElMessage.error('项目审批未通过.')
            }else{
                this.$router.push({
                    path:'/research/projectDetails',
                    query:{
                        flag:flag
                    }
                })
            }
        }
    },
    beforeMount(){
        this. projectSearch(0);
    }
}
</script>
<style>
</style>